<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .input_text {
            border: 1px solid #d9d9d9;
            color: #aaa;
            outline: none;
        }
        
        .input_text_focus {
            border: 1px solid #ffd6db;
            color: #888;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="new_header">
        <div class="new_wrap">
            <form id="hder_login_form_new" method="post">
                <input type="text" class="input_text" id="uname" value="邮箱/ID/手机号">
            </form>
        </div>
    </div>
    <script>
        // // 1.鼠标点入文本框或者密码框的时候，如果这两个表单元素中的文字是默认文字，就清空
        // // 将表单元素的边框设置为粉色

        // // 2.当表单元素中没有输入内容，焦点离开文本框的时候，粉色边框去掉，表单元素的默认文本添加上。

        // // 3.如果输入了内容，焦点离开的时候文字颜色要变深，点进文本框的时候，文字颜色又变浅。

        // // A.获取所有需要操作的元素
        // var zh = document.querySelector("#uname")

        // // B.当文本框获取焦点的时候，判断文字是否为默认文字，如果是就清空，并设置粉色边框
        // zh.onfocus = function(){
        //     if(zh.value == '邮箱/ID/手机号'){
        //         zh.value = ''
        //     }

        //     // 因为在获取焦点的时候，边框就必须改为粉色
        //     zh.style.border = '1px solid pink'
        // }

        // // C.当文本框焦点离开的时候，判断文本框内容是否为空，如果为空，重新设置为默认值 邮箱/ID/手机号
        // // 如果不为空，让文字颜色变深，去掉粉色边框
        // zh.onblur = function(){
        //     if(zh.value == ''){
        //         zh.value = '邮箱/ID/手机号'
        //         zh.style.color = '#ccc'
        
        //     }else{
        //         zh.style.color = '#666'
        //     }

        //     zh.style.border = '1px solid #ccc'
        // }

    </script>
</body>

</html>